<template>
  <div class="img-main">
    <div class="top-img">
      <div class="img" :style="{ height: imgHeight }">
        <img v-lazy="showImgUrl" :key="showImgUrl" />
      </div>
    </div>

    <div class="imgPage thumb" :style="{ height:  smallImg}">
      <div
        class="change-icon"
        :style="{ width: iconPartWidth }"
        @click="() => changeSlide('prev')"
      >
        <img
          class="transform"
          :style="{ height: iconHeight, width: iconWidth }"
          :src="publicUrl(`/images/right-step.png`)"
        />
      </div>
      
      <swiper
        class="swiper"
        :modules="modules"
        @swiper="onSwiper"
        :space-between="7"
        :slides-per-view="7"
        :free-mode="true"
        :pagination="false"
      >
        <swiper-slide
          class="slide thumb imgShow"
          @click="() => (showImgIndex = index)"
          
          v-for="(item, index) in imgArr"
        >
          <div class="frame" v-show="index === showImgIndex"></div>
          <img :src="item"
        /></swiper-slide>
      </swiper>

      <div
        class="change-icon thumb"
        :style="{ width: iconPartWidth }"
        @click="() => changeSlide('next')"
      >
        <img
          :style="{ height: iconHeight, width: iconWidth }"
          :src="publicUrl(`/images/right-step.png`)"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref, computed } from "vue";
import { publicUrl } from "@/utils/util";
import {  FreeMode } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/free-mode";

interface Props {
  defaultIndex?: number;     //默认显示第几个
  imgArr?: Array<string>;    //图片数组
  imgHeight?: string;        //大图片高度
  smallImg?: string;         //小图片高度     
  smallImgWidth?: string;    //小图片宽度
  iconHeight?: string;       //上下一页图标高度
  iconWidth?: string;        //上下一页图标宽度
  iconPartWidth?: string;    //图标父级div宽度
}

const { defaultIndex, imgArr } = withDefaults(defineProps<Props>(), {
  defaultIndex: 0,
  imgArr: () => [],
  imgHeight: "auto",
  smallImg: "auto",
  smallImgWidth: "auto",
  iconHeight: "auto",
  iconPartWidth: "auto",
  iconWidth: "auto",
});

const swiperRef = ref<any | null>(null);

const onSwiper = (swiper: any) => {
  swiperRef.value = swiper;
};
const showImgIndex = ref<number>(defaultIndex);

const changeSlide = (act: "next" | "prev") => {
  if (swiperRef.value === null) return;

  if (act === "next") {
    swiperRef.value.slideNext();
  } else {
    swiperRef.value.slidePrev();
  }
};

const showImgUrl = computed((): string => {
  return  imgArr[showImgIndex.value]
      ? imgArr[showImgIndex.value]
      : publicUrl(`/images/failImg.png`);
});

// const  swiper = ref<InstanceType<typeof Swiper>>();

// swiper.value.
// const useSwiperFunc = useSwiper();

// console.log(swiper);

const modules = [FreeMode];
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
